<template>
  
  <a-theme>
    <a-layout>
      <router-view name="TopBar"></router-view>
      <a-layout-content :style="contentStyle">
        
        <router-view v-slot="{ Component }" >
          <component :is="Component" />
        </router-view>
       
        
      </a-layout-content>
      <router-view name="FooterBar"></router-view>
    </a-layout>
  </a-theme>

</template>

<script lang="ts" setup>
import { useRouter } from "vue-router"
import type { CSSProperties } from 'vue';

const contentStyle: CSSProperties = {
  width: '100vw',
  minHeight: 'calc(100vh - 300px)',
  background: '#fff',
};

// const router = useRouter()

// router.push({
//   path: '/'
// })
</script>

<style>
* {
  /* transition: all .5s; */
  /* transition: color 1s; */
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  color: #fff !important;
  .ant-select-item-option-content div {
    border-color: #fff !important;
  }
}
 

</style>